{% block sw_customer_card %}
<mt-card
    class="sw-customer-card"
    position-identifier="sw-customer"
    :title="title"
    :is-loading="isLoading"
>
    {% block sw_customer_card_header_right %}
    <template #headerRight>
        {% block sw_customer_card_imitate_customer_modal %}
        <sw-customer-imitate-customer-modal
            v-if="showImitateCustomerModal"
            :customer="customer"
            @modal-close="onCloseImitateCustomerModal"
        />
        {% endblock %}

        {% block sw_customer_card_action_customer_impersonation %}
        <mt-button
            v-tooltip="{
                message: customerImitationWarning,
                disabled: canUseCustomerImitation,
                showOnDisabledElements: true
            }"
            :disabled="!canUseCustomerImitation"
            variant="action"
            @click="onImitateCustomer"
        >
            <template v-if="hasSingleBoundSalesChannelUrl">
                {{ $tc('sw-customer.card.buttonImitateCustomer') }}
                <mt-icon
                    name="regular-external-link-s"
                    size="12px"
                />
            </template>
            <template v-else>
                {{ $tc('sw-customer.card.buttonImitateCustomer') }}
            </template>
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_customer_card_rows %}
    <template #grid>
        <sw-container rows="auto auto">
            {% block sw_customer_card_row_primary %}
            <sw-card-section divider="bottom">
                {% block sw_customer_card_metadata_container %}
                <sw-container
                    columns="80px 1fr max-content"
                    gap="0px 30px"
                >
                    {% block sw_customer_card_avatar %}
                    <sw-avatar
                        size="80px"
                        :source-context="customer"
                        :first-name="customer.firstName"
                        :last-name="customer.lastName"
                    />
                    {% endblock %}

                    {% block sw_customer_card_metadata %}
                    <div class="sw-customer-card__metadata">
                        {% block sw_customer_card_metadata_customer_name %}
                        {% block sw_custsomer_card_metadata_customer_name_label %}
                        <template v-if="!editMode">
                            <div
                                v-if="customer"
                                class="sw-customer-card__metadata-customer-name"
                            >
                                {{ fullName }}
                                <sw-label
                                    v-if="customer.guest"
                                    appearance="pill"
                                    size="small"
                                    class="sw-customer-card__metadata-customer-guest-label"
                                >
                                    {{ $tc('sw-customer.card.labelGuest') }}
                                </sw-label>
                            </div>
                        </template>
                        {% endblock %}

                        {% block sw_customer_card_metadata_customer_name_editor %}
                        <div v-else>
                            <sw-container
                                columns="1fr 1fr"
                                gap="10px"
                            >
                                {% block sw_customer_card_account_type_field %}
                                <sw-single-select
                                    v-model:value="customer.accountType"
                                    name="sw-field--customer-accountType"
                                    class="sw-customer-card__account-type-select"
                                    :label="$tc('sw-customer.customerType.labelAccountType')"
                                    :placeholder="$tc('sw-customer.customerType.placeholderAccountType')"
                                    :options="accountTypeOptions"
                                />
                                {% endblock %}

                                {% block sw_customer_card_metadata_customer_name_editor_salutation %}
                                <sw-entity-single-select
                                    v-model:value="customer.salutationId"
                                    name="sw-field--customer-salutationId"
                                    class="sw-customer-card__salutation-select"
                                    entity="salutation"
                                    label-property="displayName"
                                    :label="$tc('sw-customer.card.labelSalutation')"
                                    :criteria="salutationCriteria"
                                />
                                {% endblock %}

                                {% block sw_customer_card_metadata_customer_name_editor_title %}

                                <mt-text-field
                                    v-model="customer.title"
                                    name="sw-field--customer-title"
                                    :label="$tc('sw-customer.card.labelTitle')"
                                    :placeholder="$tc('sw-customer.card.placeholderTitle')"
                                />
                                {% endblock %}
                            </sw-container>

                            <sw-container
                                columns="1fr 1fr"
                                gap="10px"
                            >
                                {% block sw_customer_card_metadata_customer_name_editor_first_name %}

                                <mt-text-field
                                    v-model="customer.firstName"
                                    name="sw-field--customer-firstName"
                                    :label="$tc('sw-customer.card.labelFirstName')"
                                    validation="required"
                                    required
                                    :error="customerFirstNameError"
                                    :placeholder="$tc('sw-customer.card.placeholderFirstName')"
                                />
                                {% endblock %}

                                {% block sw_customer_card_metadata_customer_name_editor_last_name %}

                                <mt-text-field
                                    v-model="customer.lastName"
                                    name="sw-field--customer-lastName"
                                    :label="$tc('sw-customer.card.labelLastName')"
                                    validation="required"
                                    required
                                    :error="customerLastNameError"
                                    :placeholder="$tc('sw-customer.card.placeholderLastName')"
                                />
                                {% endblock %}
                            </sw-container>

                            {% block sw_customer_card_metadata_customer_name_editor_company %}

                            <mt-text-field
                                v-model="customer.company"
                                name="sw-field--customer-company"
                                :required="isBusinessAccountType"
                                :error="customerCompanyError"
                                :label="$tc('sw-customer.card.labelCompany')"
                                :placeholder="$tc('sw-customer.card.placeholderCompany')"
                            />
                            {% endblock %}
                        </div>
                        {% endblock %}
                        {% endblock %}

                        {% block sw_customer_card_vat_ids %}

                        <mt-text-field
                            v-if="editMode && isBusinessAccountType"
                            v-model="customer.vatIds[0]"
                            name="vatId"
                            :label="$tc('sw-customer.card.labelVatId')"
                            :placeholder="$tc('sw-customer.card.placeholderVatId')"
                            :error="customerVatIdsError"
                        />
                        {% endblock %}

                        {% block sw_customer_card_metadata_customer_email %}
                        {% block sw_customer_card_metadata_customer_email_label %}
                        <div
                            v-if="customer.email && !editMode"
                            class="sw-customer-card__metadata-item "
                        >
                            <a
                                class="sw-customer-card-email-link"
                                :href="getMailTo(customer.email)"
                            >{{ emailIdnFilter(customer.email) }}</a>
                        </div>
                        {% endblock %}

                        {% block sw_customer_card_metadata_customer_email_editor %}
                        <mt-email-field
                            v-else
                            v-model="customer.email"
                            name="sw-field--customer-email"
                            validation="required"
                            required
                            :label="$tc('sw-customer.card.labelEmail')"
                            :placeholder="$tc('sw-customer.card.placeholderEmail')"
                            :error="customerEmailError"
                        />
                        {% endblock %}
                        {% endblock %}

                        {% block sw_customer_card_password %}
                        <mt-password-field
                            v-if="editMode"
                            v-model="customer.passwordNew"
                            name="sw-field--customer-passwordNew"
                            autocomplete="new-password"
                            :disabled="customer.guest"
                            :label="$tc('sw-profile.index.labelNewPassword')"
                            :placeholder="$tc('sw-customer.card.placeholderNewPassword')"
                            :error="customerPasswordError"
                        />
                        {% endblock %}

                        {% block sw_customer_card_password_confirm %}
                        <mt-password-field
                            v-if="editMode"
                            v-model="customer.passwordConfirm"
                            name="sw-field--customer-passwordConfirm"
                            autocomplete="new-password"
                            :disabled="customer.guest"
                            :label="$tc('sw-profile.index.labelNewPasswordConfirm')"
                            :placeholder="$tc('sw-customer.card.placeholderNewPasswordConfirm')"
                            :error="customerPasswordConfirmError"
                        />
                        {% endblock %}

                        {% block sw_customer_card_metadata_customer_tag %}
                        <sw-entity-tag-select
                            v-model:entity-collection="customer.tags"
                            name="sw-field--customer-tags"
                            :label="editMode ? $tc('sw-customer.baseForm.labelTags') : ''"
                            :placeholder="editMode ? $tc('sw-customer.baseForm.placeholderTags') : ''"
                            class="sw-customer-card__tag-select"
                            :disabled="!editMode"
                            :size="editMode ? 'default' : 'medium'"
                        />
                        {% endblock %}

                        {% block sw_customer_card_metadata_additional %}
                        <slot name="metadata-additional">
                            {% block sw_customer_card_slot_metadata_additional %}{% endblock %}
                        </slot>
                        {% endblock %}

                        {% block sw_customer_card_actions %}
                        <div
                            v-if="hasActionSlot"
                            class="sw-customer-card__actions"
                        >
                            <slot name="actions">
                                {% block sw_customer_card_slot_actions %}{% endblock %}
                            </slot>
                        </div>
                        {% endblock %}
                    </div>

                    {% endblock %}
                </sw-container>
                {% endblock %}
            </sw-card-section>
            {% endblock %}

            {% block sw_customer_card_row_secondary %}
            <sw-card-section
                secondary
                slim
            >
                <slot name="default">
                    {% block sw_customer_card_slot_default %}{% endblock %}
                </slot>
            </sw-card-section>
            {% endblock %}
        </sw-container>
    </template>
    {% endblock %}
</mt-card>
{% endblock %}
